<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <div id="app">
<!--v-text获取data数据，设置标签的内容,会覆盖之前的内容体-->
    <h2 v-text="message +'cccc'"></h2>
<!--v-html会把字符篡转化成html格式-->
    <h3 v-html="url"></h3>

    <!--v-on绑定事件  
    1.函数调用传参
    2.事件修饰符 可以对事件进行限制
    -->
    <input type="button" value="点击按钮" v-on:click="show">
    <input type="button" value="双击按钮" @dblclick="changeMessage">
    <input type="button" value="键盘事件" @keyup.enter="changeMessage">
    <!--v-show展示或隐藏元素-->
    <h1 v-show="isShow">fdsfsd</h1>
    <h2 v-show="age > 18">ccccc</h2>

    <!--v-if根据表达式的真假，切换元素的显示和隐藏（操作是dom） 频繁使用-》v-show  反之 v-if
    v-if是把元素给给删掉，v-show是style的属性display:none
    -->

    <!--v-bind设置元素的属性: src, class 
    语法：v-bind:src=  也可以简写为:-->
    <div :style="{ fontSize: size+'px'}">haha</div>

    <!--v-for 根据数据生成列表结构-->
    <ul>
        <li v-for="(item, index) in arr">
        {{index+1}} 城市：{{item}}
        </li>

    </ul>

    <h2 v-for="(p) in persons">
        {{p.name}} + {{p.age}}
    </h2>

    <input type="button" value="增加人" @click="add">
    <input type="button" value="移除人" @click="remove">
    <!--MVVM:前端的架构模式
    M:Model 负责存储数据
    V:View 负责页面的展示
    VM: ViewModel 负责业务逻辑处理
    -->

    <!--v-model: 实现双向数据绑定
        单项绑定数据v-bind：将Model绑定到view上，当Model放生变化时，view会随之变化
        双向绑定v-model： view发生变化，model也会发生改变
    -->
    <!-- shift是删除List中Index最小的一个，
                   splice(index, num)表示从index开始删除num个元素
              -->

    <input type="text" v-model:value="message"/>
    <input type="button" value="修改message" @click="changeMessage">
    <input type="button" value="点我+1" @click="count++" >
    <p>{{count}}</p>
    <h1>{{a*b}}</h1>
    {{url}}
    <p>电脑价格：{{price | addIcon}}</p>
    <p>{{persons[0].name | changeName}}</p>
    </div>

    <template id="z">
        <div>
            <button @click="show">{{msg1}}</button>
        </div>
    </template id>

    <zujianceshi></zujianceshi>
</body>

<script>
    /*全局过滤器
    总结：
    1. 过滤器一般用来处理文本格式化操作
    2。 使用的两个位置: {{}}插值表达式, v-bind表达式中
    3.过滤器时通过管道传输数据的
    */
    Vue.filter("changeName", function(value){
        return value.charAt(0).toUpperCase() + value.slice(1);
    });


    var VM = new Vue({
        el:"#app",
        components:{
            "zujianceshi": {
                template: "#z",
                data(){
                    return{
                        msg1: "lanlan"
                    } 
                },
                methods: {
                    show(){
                        alert("请稍等！");
                    }
                },

            }
        },
        data:{
            count:1,
            price: 200,
            a:10,
            b:20,
            message: "java11",
            url:"<a href='https://www.baidu.com'>百度一下</a>",
            isShow: false,
            age : 19,
            size: 10,
            arr:["上海", "北京","广东", "深圳"],
            persons: [{name:"nigulasi",age:12},{name:"nanyang",age:13}]
        },
        beforeCreate() {
            alert("在VUE对象实例化之前执行!");
        },
        created(){
        alert("组件的实例化完成了，但dom页面还未生成!");
        },
        beforeMount() {
            alert("模板已经在内存中编辑完成了，但是还没有渲染到页面中！")
        },
        mounted() {
            alert("模板已经被渲染到页面中，执行完之后就会显示！")
        },
        beforeUpdate() {
            alert("内存中的数据已经更新，但是还没有渲染到页面")
        },
        updated() {
            alert("内存中的数据已经更新，此方法执行完显示页面！")
        },
        methods: {
          show: function(){
              alert("jinggao!");
          },
          changeMessage: function(){
              this.message += "增加一点";
          },
          add: function(){
              this.persons.push({name:"xiaobing", age: 12});
          } ,
          remove: function(){

              this.persons.shift();
          } 
        },
        /*计算属性用于减少运算次数，用于重复的计算*/
        computed: {
            res: function(){
                return this.a + this.b;
            }
        },
        //局部过滤器
        filters: {
            addIcon(value){
                return "$"+value;
            }
        },
        watch: {
            //监测属性的值的变化
            count: function(nval, oval){
                alert("计数器发生变化"+oval +"->"+nval);
            }
        },
    })
</script>
</html>